<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>{$system_name}</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileColor" content="#0e90d2">
    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
  <link rel="canonical" href="http://www.example.com/">
  -->
    <link rel="stylesheet" href="__PUBLIC__/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/app.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/index.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/jquery-labelauty.css">
    <!--必要样式-->
    <style>
        .ovfHiden {
            overflow: hidden;
            height: 100%;
        }

        ul {
            list-style-type: none;
        }

        li {
            display: inline-block;
        }

        li {
            margin: 5px 0 0;
        }

        ol, ul {
            padding-left: 0.5rem;
        }

        input.labelauty + label {
            font: 12px "Microsoft Yahei";
        }

        input.labelauty + label {
            padding: 5px 10px;
            margin-right: 10px;
        }

        .header-content {
            float: left;
            width: 250px;
            height: auto;
            margin-left: 10px;
        }

        .search {
            height: 30px;
            border: 1px solid #d4d4d4;
            border-radius: 5px;
            margin: 10px auto;
            width: 100%;
            padding-left: 40px;

            font-size: 12px;
            background-image: url('__PUBLIC__/assets/i/search.png');
            background-repeat: no-repeat;
            background-size: 16px;
            background-position: 18px 6px;
            color: #999;
        }

        .header-right {
            width: 65px;
            float: left;
            padding: 8px 10px 9px 10px;
        }

        .search-btn {
            color: #F6DB7F;
            display: inline-block;
            border: 2px solid #F6DB7F;
            border-radius: 10px;
            width: 45px;
            text-align: center;
            height: 32px;
            line-height: 28px;
            font-size: 15px;
        }

        .am-slider-a1 .am-control-nav li a.am-active {
            background: #FFF;
        }

        .ring {
            width: 100%;
            height: auto;
            color: #FFF;
            font-size: 12px;
        }

        .ring-list {
            width: 100%;
            /*height: 190px;*/
            padding: 5px 0;
            position: relative;
            margin-bottom: 5px;
        }

        .ring-1v1 {
            background: url("__PUBLIC__/images/ring_bg1.png");
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
        }

        .ring-3v3 {
            background: url("__PUBLIC__/images/ring_bg2.png");
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
        }

        .ring-5v5 {
            background: url("__PUBLIC__/images/ring_bg3.png");
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
        }

        .oath {
            display: inline-block;
            width: 100%;
            color: #FFF;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: nowrap;
        }

        .username {
            display: inline-block;
            width: 100%;
            color: #FFF;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            vertical-align: bottom;
        }

        .ring-list-detail span {
            display: block;
        }

        a, a:hover, a:focus, a:visited {
            color: #FFF;
        }

        .select-box {
            background: #FFF;
            width: 100%;
            height: auto;
            position: absolute;
            top: 76px;
            z-index: 9999;
            display: none;
            overflow:scroll;
        }

        .select-header {
            line-height: 27px;
            padding: 0 10px;
            border-bottom: 1px solid #ECECEC;
        }

        .select-header span {
            font-size: 14px;
            color: #666;
            vertical-align: middle;
        }

        .select-header img {
            float: right;
            -ms-transform: rotate(90deg); /* IE 9 */
            -moz-transform: rotate(90deg); /* Firefox */
            -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
            -o-transform: rotate(90deg); /* Opera */
            transform: rotate(90deg);
            margin-right: 10px;
            margin-top: 7px;
        }

        .select-item {
            padding: 5px 15px 0;
            color: #333;
            font-size: 12px;
        }

        .select-footer {
            text-align: center;
            margin: 10px 0 40px;
        }

        .confirm-btn {
            color: #F6DB7F;
            background: #333;
            font-size: 16px;
            border-radius: 3px;
            width: 108px;
            text-align: center;
            line-height: 31px;
            display: inline-block;
        }
        ::-webkit-scrollbar{width:0px}

        .sort-item{
            width: 20%;
            float: left;
            text-align: center;
            line-height: 20px;
            color: #999;
            margin: 3px 0;
            font-size: 12px;
            border-right: 1px solid #999;
        }
        .sort-item:last-child{
            border: 0;
        }
        .selectcolor{
            color: #F6DB7F;
        }
        .newRoad{
            color: #555;
        }

        .am-header .am-header-title{
            overflow: inherit;
            margin: 0 auto;
        }
    </style>
</head>

<body>
<input type="hidden" id="room_pagenum_hidden" value="1">
<input type="hidden" id="type" value="{$type}">
<input type="hidden" id="level" value="{$level}">
<header data-am-widget="header" class="am-header am-header-default">
    <h1 class="am-header-title">
        <a href="#title-link" class="">
            {$level_name}擂台列表
        </a>
    </h1>
</header>
<div class="am-g" style="background: #333;max-width: 640px;position: relative">

    <div class="header-content">
        <input type="search" class="search" id="search" value="{$search}" placeholder="搜索擂台号或筛选">
    </div>
    <div class="header-right ">
        <a href="#"><span class="search-btn" onclick="onSerach()">搜索</span></a>
    </div>

    <div class="select-box">
        <!--<div class="select-header">-->
            <!--<span>筛选</span><img src="__PUBLIC__/assets/i/right.png" width="10" alt="">-->
        <!--</div>-->

        <div class="select-item">
            <span>选择战区</span>
            <ul class="dowebok" style="margin: 0">
                <li><input type="radio" name="region" value="1" class="labelauty" id="zq1" style="display: none;"><label
                        for="zq1"><span class="labelauty-unchecked-image"></span><span
                        class="labelauty-unchecked">微信区</span><span class="labelauty-checked-image"></span><span
                        class="labelauty-checked">微信区</span></label></li>
                <li><input type="radio" name="region" value="0" class="labelauty" id="zq2" style="display: none;"><label
                        for="zq2"><span class="labelauty-unchecked-image"></span><span
                        class="labelauty-unchecked">QQ区</span><span class="labelauty-checked-image"></span><span
                        class="labelauty-checked">QQ区</span></label></li>
            </ul>
        </div>
        <div class="select-item">
            <span>比赛模式</span>
            <ul class="dowebok" style="margin: 0">
                <li><input type="radio" name="model" value="0" class="labelauty" id="model1" style="display: none;"><label
                        for="model1"><span class="labelauty-unchecked-image"></span><span class="labelauty-unchecked">自由擂 1V1 墨家</span><span
                        class="labelauty-checked-image"></span><span class="labelauty-checked">自由擂 1V1 墨家</span></label></li>
                <li><input type="radio" name="model" value="1"  class="labelauty" id="model2" style="display: none;"><label
                        for="model2"><span class="labelauty-unchecked-image"></span><span class="labelauty-unchecked">自由擂 3V3 长平</span><span
                        class="labelauty-checked-image"></span><span class="labelauty-checked">自由擂 3V3 长平</span></label></li>
                <li><input type="radio" name="model" value="2" class="labelauty" id="model3" style="display: none;"><label
                        for="model3"><span class="labelauty-unchecked-image"></span><span class="labelauty-unchecked">自由擂 5V5 深渊</span><span
                        class="labelauty-checked-image"></span><span class="labelauty-checked">自由擂 5V5 深渊</span></label></li>
                <li><input type="radio" name="model" value="3" class="labelauty" id="model4" style="display: none;"><label
                        for="model4"><span class="labelauty-unchecked-image"></span><span class="labelauty-unchecked">自由擂 5V5 王者</span><span
                        class="labelauty-checked-image"></span><span class="labelauty-checked">自由擂 5V5 王者</span></label></li>
                <li><input type="radio" name="model" value="4" class="labelauty" id="model5" style="display: none;"><label
                        for="model5"><span class="labelauty-unchecked-image"></span><span class="labelauty-unchecked">自由擂 5V5 征召</span><span
                        class="labelauty-checked-image"></span><span class="labelauty-checked">自由擂 5V5 征召</span></label></li>
                <li><input type="radio" name="model" value="5" class="labelauty" id="model6" style="display: none;"><label
                        for="model6"><span class="labelauty-unchecked-image"></span><span class="labelauty-unchecked">输赢排位赛：单排</span><span
                        class="labelauty-checked-image"></span><span class="labelauty-checked">输赢排位赛</span></label></li>
                <li><input type="radio" name="model" value="6" class="labelauty" id="model7" style="display: none;"><label
                        for="model7"><span class="labelauty-unchecked-image"></span><span class="labelauty-unchecked">排位输赢「大」</span><span
                        class="labelauty-checked-image"></span><span class="labelauty-checked">排位输赢「大」</span></label></li>
                <li><input type="radio" name="model" value="7" class="labelauty" id="model8" style="display: none;"><label
                        for="model8"><span class="labelauty-unchecked-image"></span><span class="labelauty-unchecked">排位输赢「小」</span><span
                        class="labelauty-checked-image"></span><span class="labelauty-checked">排位输赢「小」</span></label></li>
                <li><input type="radio" name="model" value="8" class="labelauty" id="model9" style="display: none;"><label
                        for="model9"><span class="labelauty-unchecked-image"></span><span class="labelauty-unchecked">排位输赢「单」</span><span
                        class="labelauty-checked-image"></span><span class="labelauty-checked">排位输赢「单」</span></label></li>
                <li><input type="radio" name="model" value="9" class="labelauty" id="model10" style="display: none;"><label
                        for="model10"><span class="labelauty-unchecked-image"></span><span class="labelauty-unchecked">排位输赢「双」</span><span
                        class="labelauty-checked-image"></span><span class="labelauty-checked">排位输赢「双」</span></label></li>
            </ul>
        </div>
        <div class="select-item">
            <span>选择场次类型</span>
            <ul class="dowebok" style="margin: 0">
                <li><input type="radio" name="money_type" value="1" class="labelauty" id="zs" style="display: none;"><label
                        for="zs"><span class="labelauty-unchecked-image"></span><span class="labelauty-unchecked">钻石场</span><span
                        class="labelauty-checked-image"></span><span class="labelauty-checked">钻石场</span></label></li>
                <li><input type="radio" name="money_type" value="0" class="labelauty" id="jb" style="display: none;"><label
                        for="jb"><span class="labelauty-unchecked-image"></span><span class="labelauty-unchecked">金币场</span><span
                        class="labelauty-checked-image"></span><span class="labelauty-checked">金币场</span></label></li>
            </ul>
        </div>
        <div class="select-item" id="integral_select" hidden>
            <span>钻石选择</span>
            <ul class="dowebok" style="margin: 0">
                <li><input type="radio" name="integral_region" value="0" class="labelauty" id="integral1" style="display: none;"><label
                        for="integral1"><span class="labelauty-unchecked-image"></span><span
                        class="labelauty-unchecked">30-100</span><span class="labelauty-checked-image"></span><span
                        class="labelauty-checked">30-100</span></label></li>
                <li><input type="radio" name="integral_region" value="1" class="labelauty" id="integral2" style="display: none;"><label
                        for="integral2"><span class="labelauty-unchecked-image"></span><span
                        class="labelauty-unchecked">100-500</span><span class="labelauty-checked-image"></span><span
                        class="labelauty-checked">100-500</span></label></li>
                <li><input type="radio" name="integral_region" value="2"  class="labelauty" id="integral3" style="display: none;"><label
                        for="integral3"><span class="labelauty-unchecked-image"></span><span
                        class="labelauty-unchecked">500-1000</span><span class="labelauty-checked-image"></span><span
                        class="labelauty-checked">500-1000</span></label></li>
                <li><input type="radio" name="integral_region" value="3" class="labelauty" id="integral4" style="display: none;"><label
                        for="integral4"><span class="labelauty-unchecked-image"></span><span
                        class="labelauty-unchecked">1000-3000</span><span class="labelauty-checked-image"></span><span
                        class="labelauty-checked">1000-3000</span></label></li>
                <li><input type="radio" name="integral_region" value="4" class="labelauty" id="integral5" style="display: none;"><label
                        for="integral5"><span class="labelauty-unchecked-image"></span><span
                        class="labelauty-unchecked">3000以上</span><span class="labelauty-checked-image"></span><span
                        class="labelauty-checked">3000以上</span></label></li>
            </ul>
        </div>
        <div class="select-item" id="gold_select" hidden>
            <span>金币选择</span>
            <ul class="dowebok" style="margin: 0">
                <li><input type="radio" name="integral_region" value="100" class="labelauty" id="gold1" style="display: none;"><label
                        for="gold1"><span class="labelauty-unchecked-image"></span><span
                        class="labelauty-unchecked">100</span><span class="labelauty-checked-image"></span><span
                        class="labelauty-checked">100</span></label></li>
                <li><input type="radio" name="integral_region" value="200" class="labelauty" id="gold2" style="display: none;"><label
                        for="gold2"><span class="labelauty-unchecked-image"></span><span
                        class="labelauty-unchecked">200</span><span class="labelauty-checked-image"></span><span
                        class="labelauty-checked">200</span></label></li>
                <li><input type="radio" name="integral_region" value="500"  class="labelauty" id="gold3" style="display: none;"><label
                        for="gold3"><span class="labelauty-unchecked-image"></span><span
                        class="labelauty-unchecked">500</span><span class="labelauty-checked-image"></span><span
                        class="labelauty-checked">500</span></label></li>
                <li><input type="radio" name="integral_region" value="1000" class="labelauty" id="gold4" style="display: none;"><label
                        for="gold4"><span class="labelauty-unchecked-image"></span><span
                        class="labelauty-unchecked">1000</span><span class="labelauty-checked-image"></span><span
                        class="labelauty-checked">1000</span></label></li>
            </ul>
        </div>
        <div class="select-item">
            <span>手机系统</span>
            <ul class="dowebok" style="margin: 0">
                <li><input type="radio" name="systems_name" value="1" class="labelauty" id="system1" style="display: none;"><label
                        for="system1"><span class="labelauty-unchecked-image"></span><span class="labelauty-unchecked">苹果</span><span
                        class="labelauty-checked-image"></span><span class="labelauty-checked">苹果</span></label></li>
                <li><input type="radio" name="systems_name" value="0" class="labelauty" id="system2" style="display: none;"><label
                        for="system2"><span class="labelauty-unchecked-image"></span><span class="labelauty-unchecked">安卓</span><span
                        class="labelauty-checked-image"></span><span class="labelauty-checked">安卓</span></label></li>
            </ul>
        </div>
        <div class="select-item">
            <span>房间状态</span>
            <ul class="dowebok" style="margin: 0">
                <li><input type="radio" name="status" value="0" class="labelauty" id="state1" style="display: none;"><label
                        for="state1"><span class="labelauty-unchecked-image"></span><span class="labelauty-unchecked">等待中</span><span
                        class="labelauty-checked-image"></span><span class="labelauty-checked">等待中</span></label></li>
                <li><input type="radio" name="status" value="1" class="labelauty" id="state2" style="display: none;"><label
                        for="state2"><span class="labelauty-unchecked-image"></span><span class="labelauty-unchecked">进行中</span><span
                        class="labelauty-checked-image"></span><span class="labelauty-checked">进行中</span></label></li>
            </ul>
        </div>

        <div class="select-footer">
            <a href="#"><span class="confirm-btn" onclick="onSerach()">确定</span></a>
        </div>

    </div>
    <div class="am-cf"></div>

    <div class="sort-box" style="height: 26px;background: #333;width: 100%;border-bottom: 1px solid #ECECEC">
        <div class="sort-item" data-type="0" id="date">按时间↓</div>
        <div class="sort-item newRoad" data-type="1" id="num">个数</div>
        <div class="sort-item" data-type="2" id="money">金币场</div>
        <div class="sort-item" data-type="3" id="integral">钻石场</div>
        <div class="sort-item" id="sc" onclick="showSelect(this)">筛选</div>
    </div>
</div>


<div class="ring" id="room_list">

</div>
<a href="__APP__/Home/Room/addUI"><img src="__PUBLIC__/images/ic_add_room.png" width="70" class="am-round" alt="" style="position: fixed;right: 10px;bottom: 100px;"></a>


<!--[if (gte IE 9)|!(IE)]><!-->
<script src="__PUBLIC__/assets/js/jquery.min.js"></script>
<script src="__PUBLIC__/assets/js/angular.min.js"></script>
<script src="__PUBLIC__/assets/js/amazeui.min.js"></script>
<script src="__PUBLIC__/layer/layer.js"></script>
<include file="Public:nav_bottom" />
<script type="text/javascript">
    var date_sort = 0;
    var money_sort = '';
    //设置搜索栏宽度
    $(function () {
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        if (windowWidth <= 640) {
            $('.header-content').width(windowWidth - 75);
        } else {
            $('.header-content').width(640 - 125);
        }
        $('.select-box').height(windowHeight - 98);
    });

    $("input[name='money_type']").change(
        function () {
            moneyTypeChange();
        }
    );

    function moneyTypeChange(){
        var money_type = $("input[name='money_type']:checked").val();
//        console.info(money_type);
        if(money_type == 0){    //0金币
            $('#gold_select').show();
            $('#integral_select').hide();
        }else{  //钻石
            $('#integral_select').show();
            $('#gold_select').hide();
        }
    }

    function showSelect(){
        $('#sc').toggleClass('selectcolor');
        $('html,body').toggleClass('ovfHiden');
        $('.select-box').slideToggle();
    }

    //日期
    $('#date').click(function(){
        $('#date').toggleClass('selectcolor');
        if($('#date').hasClass('selectcolor')){
            $('#date').html('按时间↑');
            date_sort = 1;
        }else{
            $('#date').html('按时间↓');
            date_sort =0;
        }
        page = 1;
        is_search =1;
        searchRoomList();
    });

    //金额
    $('#num').click(function(){
        if($('#money').hasClass('selectcolor')||$('#integral').hasClass('selectcolor')){
            $('#num').toggleClass('selectcolor');
            if($('#num').hasClass('selectcolor')){

                $('#num').html('个数↑');
                money_sort = 1;
            }else{
                $('#num').html('个数↓');
                money_sort =0;
            }
            page = 1;
            is_search =1;
            searchRoomList();
        }

    });
    $('#money').click(function(){
        $('#num').removeClass('newRoad');
        $('#money').addClass('selectcolor');
        $('#integral').removeClass('selectcolor');
        $('#jb').prop("checked",true);
        $('#zs').prop('checked',false);
        console.log($("input[name='money_type']:checked").val());
        moneyTypeChange();
        page = 1;
        is_search =1;
        searchRoomList();
    });
    $('#integral').click(function(){
        $('#num').removeClass('newRoad');
        $('#integral').addClass('selectcolor');
        $('#money').removeClass('selectcolor');

        $('#zs').prop("checked",true);
        $('#jb').prop('checked',false);
        console.log($("input[name='money_type']:checked").val());
        moneyTypeChange();
        page = 1;
        is_search =1;
        searchRoomList();
    });
//    dateunder
        //搜索栏
    $(function () {
        $('#search').focus(function () {
            $('html,body').addClass('ovfHiden');
            $('.select-box').slideDown();
        });
        $('header').click(function () {
            $('html,body').removeClass('ovfHiden');
            $('.select-box').slideUp();
        });
        $('.select-header').click(function () {
            $('html,body').removeClass('ovfHiden');
            $('.select-box').slideUp();
        })
    });

    function check(input){
        if(input == undefined){
            return '';
        }
        return input;
    }

    var page=1; //当前页的页码
    var allpage =1; //总页码，会从后台获取
    var is_search = false;
    $(function () {
        searchRoomListByPage(1);
    });


    function scrollFn(){
        allpage = $('#totalpage').val();
        //真实内容的高度
        var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
        //视窗的高度
        var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
        //隐藏的高度
        var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        if(pageHeight - viewportHeight - scrollHeight < 20){  //如果满足触发条件，执行
            if(page <= allpage) {
                searchRoomList();
            }
        }
    }
    $(window).bind("scroll",scrollFn);  //绑定滚动事件
    function searchRoomListByPage(pagenum) {
        //提交form
        $('#room_pagenum_hidden').val(pagenum);
        searchRoomList();
    }

    function onSerach() {
        $('html,body').removeClass('ovfHiden');
        $('.select-box').slideUp();
        search();
    }

    function search(){
        page = 1;
        is_search = true;
        searchRoomList();
    }

    function searchRoomList() {
        var region = $("input[name='region']:checked").val();
        var systems_name = $("input[name='systems_name']:checked").val();
        var integral_region = $("input[name='integral_region']:checked").val();
        var money_type = $("input[name='money_type']:checked").val();
        var model = $("input[name='model']:checked").val();
        var status = $("input[name='status']:checked").val();
        var search = $("#search").val();
        var type = check($('#type').val());
        var level = check($('#level').val());
        region = check(region);
        systems_name = check(systems_name);
        integral_region = check(integral_region);
        money_type = check(money_type);
        model = check(model);
        status = check(status);
        search = check(search);
        $.ajax({
            type: "POST",
            url: "__URL__/ajaxRoomList",
            async: false,
            data: {
                pagenum: page,
                region :region,
                systems_name :systems_name,
                integral_region :integral_region,
                money_type :money_type,
                model :model,
                status :status,
                search :search,
                date_sort:date_sort,
                money_sort:money_sort,
                level:level,
                type:type
            },
//            dataType: "json",
            success: function (data) {
//                console.info(data);
                page++;  //页数加1
                if(is_search){
                    $('#room_list').empty().append(data);
                }else{
                    $('#room_list').append(data);
                }
                is_search = false;
                AMUI.gallery.init();
//                $("img .lazy").lazyload();
            },
            error: function (data) {
                console.info(data);
            }
        });
    }
</script>
</body>
</html>

